<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit" />
		<meta name="force-rendering" content="webkit" />
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
		<title>Report</title>
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=no">
		<#include "/include/new_resource.html"/>
		<script src="${base}/static/js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="main">
			<div class="report-box">
				<div class="hd g-header">
					<div class="left">
						<div class="logo">
							<a href="javascript:void(0);"><img src="${base}/static/images/logo.png" alt=""></a>
						</div>
					</div>
					<div class="right">
						<div class="component">
							<div class="tabs">
								<a href="${base}/admin/parameters/index">Parameters</a>
								<a href="${base}/admin/parameters/my_index">My Parameters</a>
								<a class="active" href="${base}/report/list">Report</a>
								<#if user.departmentId==1>
									<a  href="${base}/admin/userView/list">User</a>
								</#if>
							</div>
							<#include "/include/user_info.html"/>
						</div>
					</div>
				</div>
				<div class="bd">
					<div class="top">
						<div class="parameters item-style">
							<div class="tit">
								Top viewed parameters
							</div>
							<div class="content">
								<div class="table g-table">
									<div class="theader">
										<ul>
											<li>
												Parameter
											</li>
											<li>
												<button type="button">Viewed</button>
											</li>
											<li>
												Last viewer
											</li>
											<li>
												Last viewed
											</li>
										</ul>
									</div>
									<div class="tbody">
										<ul>
											<#if list??&&list?size gt 0>
											<#list list as t>
											<li>
												<div class="parameter">
													${t.name!}
												</div>
												<div class="viewed">
													${t.viewCount!}
												</div>
												<div class="last-viewer name">
													<img src="${base}${t.lastViewerPhoto!}" alt="">
													<span>${t.lastViewerName!}</span>
												</div>
												<div class="last-viewed">
													${(t.lastViewTime?datetime)!}
												</div>
											</li>
											</#list>
											</#if>
										</ul>
									</div>
								</div>
							</div>
						</div>
						<div class="keywords item-style">
							<div class="tit">
								Top search Keywords
							</div>
							<div class="content">
								<div id="whatever">

								</div>
							</div>
						</div>
					</div>
					<div class="small">
						<div class="category item-style">
							<div class="tit">
								Top category
							</div>
							<div class="content">
								<div id="category" ></div>
							</div>
						</div>
						<div class="usage item-style">
							<div class="tit">
								Background Usage
							</div>
							<div class="content">
								<div id="usage" ></div>
							</div>
						</div>

						<div class="top-user item-style">
							<div class="tit">
								Top User
							</div>
							<div class="content">
								<div class="table g-table">
									<div class="theader">
										<ul>
											<li>
												User
											</li>
											<li>
												<button type="button">Visit</button>
											</li>
										</ul>
									</div>
									<div class="tbody">
										<ul>
											<#if userViewList??&&userViewList?size gt 0>
											<#list userViewList as t>
											<li>
												<div class="user name">
													<img src="${base}${t.profilePhoto!}" alt="">
													<span>${t.name!}</span>
												</div>
												<div class="visit">
													${t.loginCount!}
												</div>
											</li>
											</#list>
											</#if>
										</ul>
									</div>
								</div> 
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 遮罩层 -->
		<div class="shade"></div>

		<script src="${base}/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="${base}/static/js/jqcloud.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- <script src="js/jquery.tagcloud.js" type="text/javascript" charset="utf-8"></script> -->
		<script src="${base}/static/js/script.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var category_category = [];
			var category_data = [];
			<#list categoryReportResult as t>
				category_category.push('${t.productCategory!}');
				category_data.push(${t.viewCount!});
			</#list>
			var bg_category = [];
			var dataPie = [];
			<#list bgReportResult as t>
				bg_category.push('${t.photoType!}');
				dataPie.push({value:${t.viewCount!},name:'${t.photoType!}'});
			</#list>
			var words = [];
			<#list searchKeyWordList as t>
				words.push({text:'${t.keyWords!}',weight:${t.ordinal!}});
			</#list>
			$(function() {
				// 柱状图
				var category = echarts.init(document.getElementById('category'));
				var categoryOption = {
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'shadow'
				        }
				    },
				    grid: {
						top:'0',
				        left: '0%',
				        right: '2%',
				        bottom: '0%',
				        containLabel: true
				    },
				    xAxis: {
				        type: 'value',
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						
				    },
				    yAxis: {
				        type: 'category',
				        data: category_category,
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						
				    },
				    series: [
				        {
				            name: 'count',
				            type: 'bar',
				            data: category_data,
							barWidth : 18,
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
										offset: 0.4,
										color: '#F7BD87'
									}, {
										offset: 1,
										color: '#E67D56'
									}]),
									label: {
										show: true, //开启显示
										position: 'insideRight', //在上方显示
										textStyle: { //数值样式
											color: 'white',
											fontSize: 12
										}
									}
								}
							},
				        }
				    ]
				};
				category.setOption(categoryOption);
				
				
				// 饼图
				let dataPie_backup = [
					{
						value: 1947,
						name: 'White',
						itemStyle: {
						 	normal: {//颜色渐变
						 		color: 'rgb(255,228,187)'
						 	}
						},
						emphasis:{
						 	itemStyle:{
						 		color: '#FDD79C'
						 	}
						}
					},
					{
						value: 523,
						name: 'Creative',
						itemStyle: {
						 	normal: {//颜色渐变
						 		color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
						 			offset: .4,
						 			color: '#F7BD87'
						 		}, {
						 			offset: 1,
						 			color: '#E67D56'
						 		}]),
						 	},
						} 
						
					},
				];
				let total = 0;
				dataPie.forEach(function(val, idx, arr) {
				     total += val.value;
				})
				var usage = echarts.init(document.getElementById('usage'));
				var usageOption = {
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},
					legend: {
						data: bg_category,
						orient: 'vertical',
						top:'15%',
						left: $(window).width() < 1480 ? '55%':'60%',
						inactiveColor:'#ccc',
						itemGap: 80,
						itemWidth: 20,
						itemHeight: 20,
						formatter: function(name) {
							 let target,percent;
							 for (let i = 0; i < dataPie.length; i++) {
								 if (dataPie[i].name === name) {
									 target = dataPie[i].value;
									 percent = ((target/total)*100).toFixed(2);
								 }
							 }
							 let arr = [ ' {name|'+ name + '}' + ' {percent|'+ percent + '%}',' {value|'+ target + '}'];
							 return arr.join("\n ")
						},
						textStyle: {
							lineHeight: 20,
							fontSize:16,
							rich: {
								value: {
									color: '#F7BD87',
									fontSize: $(window).width() < 1480 ? 26 : 44,
									padding: [0, 0,80, 0]
								},
								name: {
									color: '#000',
									fontSize: 12,
									padding: $(window).width() < 1480 ? [0, 10, 25, 0] :[0, 25, 25, 0]
								},
								percent: {
									color: '#000',
									fontSize: 14,
									padding: [0, 0, 25, 0]
								}
							}
						},
					},
					series: [
						{
							name:'参数',
							type: 'pie',
							radius: $(window).width() < 1480 ? '55%' : '75%',
							center: ['30%', '50%'],
							data: dataPie ,
							label: {
			                    normal: {
			                       position: 'inner',
			                       show : false
			                    }
			                },
						
						},	
						{
							name: '外边框',
							type: 'pie',
							clockWise: false, //顺时加载
							hoverAnimation: false, //鼠标移入变大
							center: ['30%', '50%'],
							radius: $(window).width() < 1480 ? ['55%', '55%'] : ['75%', '75%'],
							label: {
								normal: {
									show: false
								}
							},
							data: [{
								value: 9,
								name: '',
								itemStyle: {
									normal: {
										borderWidth: 2,
										borderColor: '#EAEAEA'
									}
								}
							}]
						},
					]
				};
				usage.setOption(usageOption);
				
				
				window.onresize = function () {
					category.resize();
					usage.resize();
				}
				console.log(words)
				$("#whatever").jQCloud(words, {
					autoResize: true,
					colors: ["#9d9d9d", "#d07d2d"],
					fontSize: {
					    from: '70px',
					    to: '12px'
					}
				});
			})
			
			function getRandom(start, end, fixed=0) {
				let differ = end - start
				let random = Math.random()
				return (start + differ * random).toFixed(fixed)
			}
			
		</script>
	</body>

</html>
